<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引导页3</title>
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica', 'Arial', sans-serif;
    }

    /* 自定义工具类 */
    .text-shadow {
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .illustration-shadow {
      filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
    }

    .btn-hover {
      transition: all 0.3s ease;
    }

    .btn-hover:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* 主体样式 */
    body {
      background-color: #F7F9FC;
      min-height: 100vh;
      display: flex;
      justify-content: center;
    }

    .app-container {
      width: 100%;
      max-width: 480px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* 插图区域 */
    .illustration-section {
      flex: 1;
      background-color: white;
      padding: 40px 20px;
      position: relative;
      overflow: hidden;
    }

    /* 蓝色圆点背景 */
    .dot-pattern {
      position: absolute;
      top: 0;
      left: 0;
      width: 240px;
      height: 240px;
      background-image: radial-gradient(#165DFF 5%, transparent 5%);
      background-size: 20px 20px;
      opacity: 0.15;
      border-radius: 50%;
      transform: translate(-25%, -25%);
    }

    /* 插图容器 */
    .illustration-container {
      position: relative;
      width: 100%;
      height: 100%;
      max-height: 320px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 左侧老人 */
    .elderly-person {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 100px;
      height: 160px;
    }

    .elder-head {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #E0E0E0;
      margin: 0 auto;
    }

    .elder-body {
      width: 60px;
      height: 90px;
      background-color: #E0E0E0;
      border-radius: 25px 25px 0 0;
      margin: 5px auto 0;
      position: relative;
    }

    .elder-shirt {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background-color: #FFFFFF;
      border-radius: 0 0 25px 25px;
      border: 2px solid #424242;
    }

    .elder-glasses {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
    }

    .glass-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #212121;
    }

    .elder-hand {
      position: absolute;
      top: 30px;
      right: -10px;
      width: 15px;
      height: 15px;
      background-color: #E0E0E0;
      border-radius: 50%;
    }

    /* 右侧女性 */
    .woman-person {
      position: absolute;
      bottom: 20px;
      right: 20px;
      width: 140px;
      height: 200px;
    }

    .woman-head {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: #424242;
      margin: 0 auto;
    }

    .woman-body {
      width: 70px;
      height: 100px;
      background-color: #424242;
      border-radius: 30px 30px 0 0;
      margin: 5px auto 0;
    }

    .woman-skirt {
      width: 90px;
      height: 50px;
      background-color: #FFFFFF;
      margin: -5px auto 0;
      border-radius: 0 0 45px 45px;
      border: 2px solid #424242;
    }

    .woman-legs {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 5px;
    }

    .leg {
      width: 12px;
      height: 30px;
      background-color: #424242;
      border-radius: 0 0 6px 6px;
    }

    /* 沙发 */
    .sofa {
      position: absolute;
      bottom: 20px;
      right: 10px;
      width: 160px;
      height: 100px;
      background-color: #F5F5F5;
      border-radius: 15px;
      border: 2px solid #E0E0E0;
      z-index: -1;
    }

    .sofa-arm {
      position: absolute;
      left: -15px;
      top: 20px;
      width: 20px;
      height: 60px;
      background-color: #F5F5F5;
      border: 2px solid #E0E0E0;
      border-radius: 10px 0 0 10px;
    }

    .sofa-cushion {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 60px;
      height: 40px;
      background-color: #EEEEEE;
      border-radius: 8px;
      border: 1px solid #E0E0E0;
    }

    /* 手机 */
    .phone {
      position: absolute;
      bottom: 110px;
      right: 80px;
      width: 30px;
      height: 50px;
      background-color: #FFDD55;
      border-radius: 5px;
    }

    /* 通知线 */
    .notification-lines {
      position: absolute;
      top: 120px;
      left: 140px;
      width: 100px;
      height: 80px;
    }

    .line {
      position: absolute;
      height: 2px;
      background-color: #165DFF;
      transform-origin: left center;
    }

    .line-1 {
      width: 100px;
      top: 0;
      transform: rotate(30deg);
    }

    .line-2 {
      width: 90px;
      top: 15px;
      transform: rotate(15deg);
    }

    .line-3 {
      width: 80px;
      top: 30px;
      transform: rotate(0deg);
    }

    .notification-dot {
      position: absolute;
      width: 6px;
      height: 6px;
      background-color: #165DFF;
      border-radius: 50%;
    }

    .dot-1 {
      right: 0;
      top: -2px;
    }

    .dot-2 {
      right: 0;
      top: 13px;
    }

    .dot-3 {
      right: 0;
      top: 28px;
    }

    /* 内容区域 */
    .content-section {
      background: linear-gradient(to bottom, #165DFF 0%, #0F4CD8 100%);
      color: white;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }

    .title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
      line-height: 1.4;
    }

    .description {
      font-size: 15px;
      line-height: 1.6;
      text-align: center;
      margin-bottom: 30px;
      flex-grow: 1;
    }

    /* 分页指示器 */
    .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 25px;
    }

    .page-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .page-dot.active {
      background-color: white;
      transform: scale(1.3);
    }

    /* 下一步按钮 */
    .next-button {
      background-color: white;
      color: #165DFF;
      border: none;
      border-radius: 30px;
      padding: 14px;
      font-size: 17px;
      font-weight: bold;
      width: 100%;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* 动画效果 */
    .fade-in {
      animation: fadeIn 0.8s ease forwards;
      opacity: 0;
    }

    .elderly-person {
      animation-delay: 0.1s;
    }

    .woman-person {
      animation-delay: 0.3s;
    }

    .notification-lines {
      animation-delay: 0.5s;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 响应式调整 */
    @media (max-width: 320px) {
      .title {
        font-size: 22px;
      }

      .description {
        font-size: 14px;
      }

      .elderly-person {
        left: 20px;
        transform: scale(0.9);
      }

      .woman-person {
        right: 10px;
        transform: scale(0.9);
      }
    }

    @media (min-height: 700px) {
      .illustration-section {
        padding-top: 80px;
      }
    }
  </style>
</head>

<body>
  <div class="app-container">
    <!-- 插图区域 -->
    <div class="illustration-section">
      <div class="dot-pattern"></div>
      <div class="illustration-container">
        <!-- 沙发 -->
        <div class="sofa">
          <div class="sofa-arm"></div>
          <div class="sofa-cushion"></div>
        </div>

        <!-- 左侧老人 -->
        <div class="elderly-person fade-in">
          <div class="elder-head">
            <div class="elder-glasses">
              <div class="glass-circle"></div>
              <div class="glass-circle"></div>
            </div>
          </div>
          <div class="elder-body">
            <div class="elder-shirt"></div>
            <div class="elder-hand"></div>
          </div>
        </div>

        <!-- 右侧女性 -->
        <div class="woman-person fade-in">
          <div class="woman-head"></div>
          <div class="woman-body"></div>
          <div class="phone"></div>
          <div class="woman-skirt"></div>
          <div class="woman-legs">
            <div class="leg"></div>
            <div class="leg"></div>
          </div>
        </div>

        <!-- 通知线 -->
        <div class="notification-lines fade-in">
          <div class="line line-1"></div>
          <div class="line line-2"></div>
          <div class="line line-3"></div>
          <div class="notification-dot dot-1"></div>
          <div class="notification-dot dot-2"></div>
          <div class="notification-dot dot-3"></div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <h2 class="title text-shadow">守护您的安全</h2>
      <p class="description">
        在因疾病等原因失去意识或无法行动的紧急情况下，如果超过一定时间没有收到智能手机的通知，为了确认安全，将通过运营公司联系您的亲属等。
      </p>

      <div class="pagination">
        <div class="page-dot"></div>
        <div class="page-dot active"></div>
        <div class="page-dot"></div>
      </div>

      <button class="next-button btn-hover" id="nextBtn">下一步</button>
    </div>
  </div>

  <script>
    // 页面加载动画和交互效果
    document.addEventListener('DOMContentLoaded', () => {
      // 获取主要元素
      const illustrationSection = document.querySelector('.illustration-section');
      const contentSection = document.querySelector('.content-section');
      const nextButton = document.querySelector('.next-button');
      const pageDots = document.querySelectorAll('.page-dot');

      // 初始化动画
      const initAnimations = () => {
        // 插图区域淡入动画
        illustrationSection.style.opacity = '0';
        illustrationSection.style.transform = 'translateY(20px)';

        setTimeout(() => {
          illustrationSection.style.transition = 'all 1s ease';
          illustrationSection.style.opacity = '1';
          illustrationSection.style.transform = 'translateY(0)';
        }, 100);

        // 内容区域动画
        setTimeout(() => {
          contentSection.style.animation = 'slideInUp 0.8s ease forwards';
        }, 300);

        // 分阶段显示元素
        const elements = document.querySelectorAll('.fade-in');
        elements.forEach((el, index) => {
          el.style.opacity = '0';
          el.style.transform = 'translateY(20px)';

          setTimeout(() => {
            el.style.transition = 'all 0.8s ease';
            el.style.opacity = '1';
            el.style.transform = 'translateY(0)';
          }, 500 + (index * 200));
        });
      };

      // 按钮交互效果
      const addButtonEffects = () => {
        nextButton.addEventListener('mouseenter', () => {
          nextButton.style.transform = 'translateY(-2px) scale(1.02)';
        });

        nextButton.addEventListener('mouseleave', () => {
          nextButton.style.transform = 'translateY(0) scale(1)';
        });

        nextButton.addEventListener('mousedown', () => {
          nextButton.style.transform = 'translateY(0) scale(0.98)';
        });

        nextButton.addEventListener('mouseup', () => {
          nextButton.style.transform = 'translateY(-2px) scale(1.02)';
        });

        // 点击按钮效果
        nextButton.addEventListener('click', (e) => {
          e.preventDefault();

          // 创建波纹效果
          const ripple = document.createElement('span');
          const rect = nextButton.getBoundingClientRect();
          const size = Math.max(rect.width, rect.height);
          const x = e.clientX - rect.left - size / 2;
          const y = e.clientY - rect.top - size / 2;

          ripple.style.cssText = `
                        position: absolute;
                        width: ${size}px;
                        height: ${size}px;
                        left: ${x}px;
                        top: ${y}px;
                        background: rgba(22, 93, 255, 0.3);
                        border-radius: 50%;
                        transform: scale(0);
                        animation: ripple 0.6s linear;
                        pointer-events: none;
                    `;

          nextButton.appendChild(ripple);

          setTimeout(() => {
            ripple.remove();
          }, 600);

          // 跳转到引导页4
          window.location.href = '登陆前-引导页4.html';
        });
      };

      // 分页指示器交互
      const addPaginationEffects = () => {
        pageDots.forEach((dot, index) => {
          dot.addEventListener('click', () => {
            // 移除所有active类
            pageDots.forEach(d => d.classList.remove('active'));
            // 添加active类到当前点击的dot
            dot.classList.add('active');
          });

          dot.addEventListener('mouseenter', () => {
            if (!dot.classList.contains('active')) {
              dot.style.transform = 'scale(1.2)';
            }
          });

          dot.addEventListener('mouseleave', () => {
            if (!dot.classList.contains('active')) {
              dot.style.transform = 'scale(1)';
            }
          });
        });
      };

      // 人物悬停效果
      const addPersonHoverEffects = () => {
        const persons = document.querySelectorAll('.elderly-person, .woman-person');
        persons.forEach(person => {
          person.addEventListener('mouseenter', () => {
            person.style.transform = 'translateY(-4px) scale(1.05)';
            person.style.transition = 'all 0.3s ease';
          });

          person.addEventListener('mouseleave', () => {
            person.style.transform = 'translateY(0) scale(1)';
          });
        });
      };

      // 通知线动画增强
      const addNotificationAnimations = () => {
        const lines = document.querySelectorAll('.line');
        const dots = document.querySelectorAll('.notification-dot');

        // 为线条添加绘制动画
        lines.forEach((line, index) => {
          line.style.strokeDasharray = line.offsetWidth;
          line.style.strokeDashoffset = line.offsetWidth;

          setTimeout(() => {
            line.style.transition = 'stroke-dashoffset 1s ease-in-out';
            line.style.strokeDashoffset = '0';
          }, 1000 + (index * 300));
        });

        // 为圆点添加闪烁效果
        dots.forEach((dot, index) => {
          setInterval(() => {
            dot.style.opacity = '0.3';
            setTimeout(() => {
              dot.style.opacity = '1';
            }, 200);
          }, 2000 + (index * 500));
        });
      };

      // 手机震动效果
      const addPhoneVibration = () => {
        const phone = document.querySelector('.phone');
        if (phone) {
          setInterval(() => {
            phone.style.transform = 'translateY(0px) rotate(0deg)';
            setTimeout(() => {
              phone.style.transform = 'translateY(-1px) rotate(1deg)';
            }, 100);
            setTimeout(() => {
              phone.style.transform = 'translateY(1px) rotate(-1deg)';
            }, 200);
            setTimeout(() => {
              phone.style.transform = 'translateY(0px) rotate(0deg)';
            }, 300);
          }, 3000);
        }
      };

      // 性能优化：使用 Intersection Observer
      const addIntersectionObserver = () => {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.style.animationPlayState = 'running';
            }
          });
        }, {
          threshold: 0.1
        });

        // 观察所有需要动画的元素
        const animatedElements = document.querySelectorAll('.elderly-person, .woman-person, .notification-lines, .sofa, .phone');
        animatedElements.forEach(el => {
          el.style.animationPlayState = 'paused';
          observer.observe(el);
        });
      };

      // 初始化所有效果
      initAnimations();
      addButtonEffects();
      addPaginationEffects();
      addPersonHoverEffects();
      addNotificationAnimations();
      addPhoneVibration();
      addIntersectionObserver();

      // 添加键盘导航支持
      nextButton.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          nextButton.click();
        }
      });
    });

    // 添加CSS动画关键帧
    const style = document.createElement('style');
    style.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
            
            @keyframes slideInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        `;
    document.head.appendChild(style);
  </script>
</body>

</html>